<script lang="ts" setup>
import type { Statistics01Item } from '@/api/designer/model'
import type { Statistics01ComponentMeta } from '@/definitions/type'
import AddButton from '@/components/AddButton/AddButton.vue'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { useCompStyle } from '@/hooks/useCompStyle'
import { removeItem, sortItem } from '@/utils/helper'
import { buildShortUUID } from '@/utils/uuid'
import { Input, RadioButton, RadioGroup } from 'ant-design-vue'

defineOptions({
  name: 'Statistics01Attr',
  inheritAttrs: true,
})

const { activeRender } = useCompStyle<Statistics01ComponentMeta>()
const MAX_ITEMS = 6
function createStatistics01Item(): Statistics01Item {
  return {
    id: buildShortUUID(),
    title: '',
    value: '',
    valueRules: {
      min: 2,
      required: true,
    },
    titleRules: {
      min: 2,
      max: 6,
      required: true,
    },
  }
}
function handleAddItem() {
  if (!activeRender.value)
    return
  if (activeRender.value.config.items!.length >= MAX_ITEMS) 
    return
  activeRender.value.config.items!.push(createStatistics01Item())
}
function handleRemoveItem(item: Statistics01Item) {
  if (!activeRender.value)
    return
  removeItem(activeRender.value.config.items!, l => l.id === item.id)
}
function handleSort(item: Statistics01Item, type: 'up' | 'down') {
  sortItem(activeRender.value!.config.items!, l => l.id === item.id, type)
}
</script>

<template>
  <div v-if="activeRender">
    <div class="setting-block">
      <div class="title-label">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="setting-block">
      <div class="title-label">
        组件内容
      </div>
      <!-- 图片列表 -->
      <div class="flex flex-col w-full gap-3 mt-3">
        <!-- item for loop -->
        <div v-for="(item, index) in activeRender.config.items" :key="item.id" class="relative w-full pr-8">
          <!-- 灰色块 -->
          <div class="box-border w-full rounded bg-[#FAFAFF] p-14px">
            <div class="flex flex-row items-center gap-2">
              <div class="text-sm text-second-render flex-none">
                数字
              </div>
              <Input v-model:value="item.value" placeholder="请输入数字" class="flex-1" :minlength="item.valueRules?.min" :max-length="item.valueRules?.max" :required="item.valueRules?.required" />
            </div>
            <div class="flex flex-row items-center gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                内容
              </div>
              <Input v-model:value="item.title" placeholder="请输入内容" class="flex-1" :minlength="item.titleRules?.min" :max-length="item.titleRules?.max" :required="item.titleRules?.required" />
            </div>
          </div>
          <!-- 灰色块操作 -->
          <BlockOpts
            :item="item" :disabled-up="index === 0"
            :disabled-down="index === activeRender.config.items!.length - 1" @remove="handleRemoveItem"
            @sort="handleSort"
          />
        </div>
      </div>
      <!-- 添加图片按钮 -->
      <AddButton v-if="(activeRender.config.items?.length || 0) < MAX_ITEMS" @click="handleAddItem">
        添加
      </AddButton>
    </div>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.setting-block {
  @apply mb-6;
}
.title-label {
  color: var(--app-text-color-main);
  margin-bottom: 14px;
  @apply text-sm font-700;
}
</style>
